<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>swoole websocket chatroom</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link href="/static/css/chat.css" rel="stylesheet">

    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/jquery.json.js"></script>
    <script src="/config.js" charset="utf-8"></script>
    <script src="/static/js/chat.js" charset="utf-8"></script>
    <style>
        body {
            padding-top: 60px;
        }
    </style>
    <!-- <link href="/static/css/bootstrap-responsive.css" rel="stylesheet"> -->
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="brand" href="/">Swoole Chatting--技术测试项目</a>

            <div class="nav-collapse">
                <!--             <ul class="nav">
      <li class="active"><a href="/">Lobby</a></li>
    </ul> -->
                <ul class="nav pull-right">

                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>

<div class="container">
    <div class="container">
        <div class="row">

            <!--主聊天区-->
            <div id="chat-column" class="span8">

                <!--
                <div id="chat-tool" style="height:100px;border:0px solid #ccc;">
                    个人资料区
                </div>
                -->

                <!--消息显示区-->
                <div id="chat-messages" style="border:0px solid #ccc;">
                    <div class="message-container">
                    </div>
                </div>


                <!--工具栏区-->
                <div id="chat-tool"
                     style="padding-left:10px;height:30px;border:0px solid #ccc;background-color:#F5F5F5;">
                    <select id="userlist" style="float: left; width: 90px;">
                        <option value=0>所有人</option>
                    </select>

                    <!-- 聊天表情 -->
                    <a onclick="toggleFace()" id="chat_face" class="chat_face">
                        <img src="/static/img/face/15.gif"/>
                    </a>
                </div>
                <!--工具栏结束-->


                <!--聊天表情弹出层-->
                <div id="show_face" class="show_face">
                </div>
                <!--聊天表情弹出层结束-->


                <!--发送消息区-->
                <div id="input-msg" style="height:110px;border:0px solid #ccc;">
                    <form id="msgform" class="form-horizontal post-form">
                        <div class="input-append">
                            <textarea id="msg_content" style="width:500px;height:80px;" rows="3" cols="500"
                                      contentEditable="true"></textarea>
                            <img style="width:80px;height:90px;" onclick="sendMsg()" style=""
                                 src="/static/img/button.gif"/>
                        </div>
                    </form>
                </div>
            </div>
            <!--主聊天区结束-->


            <!--左边栏-->

            <div id="left-column" class="span3">
                <div class="well c-sidebar-nav">
                    <ul class="nav nav-list">
                        <li class="nav-header">Chats</li>
                        <li class="active"><a href="javascript:void(0)">In Room</a>
                        </li>
                    </ul>
                    <ul id="left-userlist">
                    </ul>
                    <div style="clear: both"></div>
                </div>
            </div>

        </div>
    </div>
    <!-- /container -->
    <div id="msg-template" style="display: none">
        <div class="message-container">
            <div class="userpic"></div>
            <div class="message">
                <span class="user"></span>

                <div class="cloud cloudText">
                    <div style="" class="cloudPannel">
                        <div class="sendStatus"></div>
                        <div class="cloudBody">
                            <div class="content"></div>
                        </div>
                        <div class="cloudArrow "></div>
                    </div>
                </div>
            </div>
            <div class="msg-time"></div>
        </div>
    </div>
    <!-- / -->
</div>
</body>
</html>

